<template>
  <el-row class="bgf">
    <el-col :span="12" :offset="5">
      <el-form label-width="100px" :model="forminfo"  ref="forminfo">
        <el-form-item label="属性名" prop="specsname">
          <el-input v-model="forminfo.specsname"></el-input>
        </el-form-item>
        <el-form-item label="属性值">
           <div class="row" v-for="(item,index) in attrlist" :key="index">
              <el-input v-model="item.value"></el-input>
              <el-button v-if="index==0" @click="addAttr" type="success">添加属性</el-button>
              <el-button v-else @click="delAttr(index)" type="danger">删除属性</el-button>
           </div>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
          <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
          <el-button type="success" v-else @click="submit">立即修改</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
// 如何区分是添加还是修改页面！
// 根据路由是否传入的 动态参数！  this.$route.params.id  修改！
import { editSpecs, addSpecs,getSpecs } from "@/request/specs";
let defaultInfo = {}; // 修改的时候的重置！
export default {
  data() {
    return {
      forminfo: {
        specsname: "", // 属性名
        attrs: "", // 属性值
        status: 1 // 状态
      },
      attrlist:[ {value:""} ]  // 属性值数组
    };
  },
  created() {
    if (this.$route.params.id) {
      // 获取修改的这一条的数据，赋给表单！
      this.getinfo(this.$route.params.id);
    }
  },
  methods: {
    async getinfo(id) {
      // 获取修改数据，赋给表单！
      this.forminfo = await getSpecs(id);
      // 属性值的回显
      this.attrlist = this.forminfo.attrs.map(val=>{
        return {  value:val   }
      })
      // 赋给一个临时变量，用于重置的时候再次赋值！
      defaultInfo = { ...this.forminfo };
    },
    async submit() {
      // 提交数据 【添加、修改】
      // 将attrlist里面的属性值，赋给attrs
      this.forminfo.attrs = this.attrlist.map(val=>{
        return val.value;
      })
      if(!this.forminfo.attrs[0]){
          this.$message.warning("至少要有一个属性值");
          return false;
      }
      // 变成字符串
      this.forminfo.attrs = this.forminfo.attrs.join(",")
      // 发送请求！
      let res;
      if (this.$route.params.id) {
         this.forminfo.id = this.$route.params.id;
         res = await editSpecs(this.forminfo);   
      } else {
          res = await addSpecs(this.forminfo);
      }
      if (res) {
        this.$router.back();
      }
    },
    reset() {
      // 重置
      // resetFields表单重置！
      if (this.$route.params.id) {
        // 修改重置
        this.forminfo = { ...defaultInfo };
        // 属性值的回显
        this.attrlist = this.forminfo.attrs.map(val=>{
          return {  value:val   }
        })
      } else {
        // 添加重置
        this.$refs.forminfo.resetFields();
      }
    },
    addAttr(){ // 添加属性
        if(this.attrlist.length<=5){
          this.attrlist.push({ value:"" })
        }else{
          this.$message.warning("属性值最多5个")
        }
    },
    delAttr(idx){
      this.attrlist.splice(idx,1)
    }
  },
  components: {}
};


</script>
<style scoped>
.row{
  display: flex!important;
  margin-bottom: 10px;
}
.row .el-input{
  width: 200px!important;
  margin-right: 10px;
}
</style>